<TabView #tabView class="tab-view" sdkExampleTitle sdkToggleNavButton>
    <GridLayout *tabItem="{title: 'Bigger thumbs on the left'}">
        <!-- >> multi-line-big-left-html -->
        <ListView class="list-group" [items]="countries" (itemTap)="onItemTapSecondList($event)" (setupItemView)="onSetupItemView($event)">
            <ng-template let-country="item" let-third="third">
                <GridLayout class="list-group-item" rows="*" columns="auto, *">
                    <StackLayout col="1">
                        <Label class="list-group-item-heading" [text]="country.name"></Label>
                        <Label class="list-group-item-text" [text]="country.desc" textWrap="true"></Label>
                    </StackLayout>
                    <Image col="0" [src]="country.imageSrc" class="thumb img-rounded" width="92" height="92" verticalAlignment="top"></Image>
                </GridLayout>
            </ng-template>
        </ListView>
        <!-- << multi-line-big-left-html -->
    </GridLayout>
    <GridLayout *tabItem="{title: 'Bigger thumbs on the right'}">
        <!-- >> multi-line-big-right-html -->
        <ListView class="list-group" [items]="countries" (itemTap)="onItemTapThirdList($event)" (setupItemView)="onSetupItemView($event)">
            <ng-template let-country="item" let-third="third">
                <GridLayout class="list-group-item" rows="*" columns="*, auto">
                    <StackLayout col="0">
                        <Label class="list-group-item-heading" [text]="country.name"></Label>
                        <Label class="list-group-item-text" [text]="country.desc" textWrap="true"></Label>
                    </StackLayout>
                    <Image col="1" [src]="country.imageSrc" class="thumb img-rounded" width="92" height="92" verticalAlignment="top"></Image>
                </GridLayout>
            </ng-template>
        </ListView>
        <!-- << multi-line-big-right-html -->
    </GridLayout>
    <GridLayout *tabItem="{title: 'Bigger thumbs (grouped lists)'}">
        <!-- >> multi-line-big-grouped-html -->
        <ListView [items]="groupedCountries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group"
            separatorColor="white">
            <ng-template nsTemplateKey="header" let-header="item">
                <Label [text]="header.name" class="list-group-item bg-primary" isUserInteractionEnabled="false" color="white" fontSize="24"></Label>
            </ng-template>

            <ng-template nsTemplateKey="footer" let-footer="item">
                <Label [text]="footer.name" class="list-group-item" backgroundColor="gray" fontSize="12"></Label>
            </ng-template>

            <ng-template nsTemplateKey="cell" let-country="item">
                <GridLayout class="list-group-item" rows="*" columns="*, auto">
                    <StackLayout col="0">
                        <Label [text]="country.name" class="list-group-item-heading"></Label>
                        <Label [text]="country.desc" class="list-group-item-text" textWrap="true"></Label>
                    </StackLayout>
                    <Image col="1" [src]="country.imageSrc" class="thumb img-rounded" width="92" height="92" verticalAlignment="top"></Image>
                </GridLayout>
            </ng-template>
        </ListView>
        <!-- << multi-line-big-grouped-html -->
    </GridLayout>
</TabView>